﻿import React from 'react';
import { BrowserRouter, HashRouter, Route, Link } from 'react-router-dom';
import Login from './Login'
import { Modal, Button, message } from 'antd';
import './css/LogReg.css';

class Register extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            password: "",
            username: "",
        }
    }
    GetUsername(e) {
        this.setState({
            username: e.target.value
        })
    }
    GetPassword(e) {
        this.setState({
            password: e.target.value
        })
    }
    ToRegister() {
        var username = this.state.username,
            password = this.state.password;
        let userList = localStorage.getItem('userList');
        //判断是否有用户信息存在
        if (userList) {
            userList = JSON.parse(userList)
            console.log(userList)
            console.log(typeof userList)
            // 判断当前用户信息是否存在
            var isExist = userList.some(userInfo => {
                return userInfo.username === username;
            })
            //如果不存在当前用户信息
            if (!isExist) {
                if (username.length <= 0) {
                    alert("用户名不能为空");
                    return;
                }
                if (password.length < 6) {
                    console.log(password)
                    alert("密码不能低于6位数");
                    return;
                }
                // 把当前这一次的用户信息添加到数组里，然后重新存storage
                userList.push({ username, password })
                localStorage.setItem('userList', JSON.stringify(userList));
                message.success('注册成功');
                this.props.history.push('/login')
            } else {
                alert("已存在该用户，请勿重复注册");
            }
            console.log(isExist)
        } else {
            //无值：第一次存                      
            let userInfo = { username, password };
            // 用一个对象存放userInfo[为了后面第二次存储更加的方便，所以第一次就存一个元素的数组]
            let arr = [userInfo];
            // console.log("arr")
            // console.log(arr)
            localStorage.setItem("userList", JSON.stringify(arr));
            message.success('注册成功，自动为您跳转到登录页面', 3);
            //页面跳转
            this.props.history.push('/login')

        }
    }

    render() {
        return (
            <div className='bigBox'>
                <div className="formCourse">
                    <form className='formReg'>
                        <h1 className='courseTit'>课程评价系统</h1>
                        <h3 className='courseTit1'>注册</h3>
                        <input className='ipt' placeholder="请设置用户名" value={this.state.username} onChange={this.GetUsername.bind(this)} />
                        <br />
                        <br />
                        <input className='ipt' placeholder="请设置密码" value={this.state.password} onChange={this.GetPassword.bind(this)} />
                        <br />
                        <br />
                        <button className='btn' type='button' onClick={this.ToRegister.bind(this)}>注册</button>
                        <br />
                        <br />
                        <Link to='/login'>已有账号？去登录</Link>
                    </form>
                </div>
            </div>
        )
    }
    /*register() {
        // 先去localStorage里取看是否有数据
        let userList = localStorage.getItem('userList')
        // 如果有数据
        if (userList) {
            userList = JSON.parse(userList)
            userList.push({ username, password })
            localStorage.setItem('userList', JSON.stringify(userList))
        }
        // 如果没有数据
        else {
            let userInfo = { username, password }
            let userArr = [userInfo]
            localStorage.setItem('userList', JSON.stringify(userArr))
        }
    }*/
}
export default Register